<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Recovery Password</title>
        <h:outputStylesheet library="css" name="stylesheet.css" />
    </h:head>
    <h:body id = "indexBody">
        <header id="mainHeader">
            <div style="width:1000px;height:110px;margin:auto;">
                <a href="index.xhtml"><h1 id="mainTitle">MeteoCal</h1></a>
            </div>
        </header>
        <section id="homeSection">
            <div style="width:1000px;margin:auto;">
                <h:form id="recovery">
                    <p:growl id="growl" sticky="true" showDetail="true" life="3000"/>
                    <p:wizard flowListener="#{passwordLostBean.recoveryPasswordProcess}" >
                        <p:tab id="emailtab" title="Email">
                            <p:panel header="Insert your email address" style="height:180px;">
                                <h:panelGrid columns="1" columnClasses="label, value">
                                    <p:inputText id="email" value="#{passwordLostBean.username}" maxlength="200"
                                                 required="true" label="Email"/>
                                    <p:watermark for="email" value="Email"/>
                                    <p:messages />
                                </h:panelGrid>
                            </p:panel>
                        </p:tab>

                        <p:tab id="tokentab" title="Token">
                            <p:panel header="Change Password" style="height:180px;">
                                <p:messages />
                                <h:panelGrid columns="2" columnClasses="label, value">
                                    <p:inputText value="#{passwordLostBean.token}" required="true" id="token"
                                                 maxlength="200"/>
                                    <p:watermark for="token" value="Paste token here"/>

                                    <p:password value="#{passwordLostBean.newPassword}" required="true" id="password"
                                                maxlength="200" feedback="true" />
                                    <p:watermark for="password" value="Password"/>
                                </h:panelGrid>
                                <p:commandButton value="Submit" action="#{passwordLostBean.changeLostPassword}"
                                                 update="growl"/>
                            </p:panel>
                        </p:tab>
                    </p:wizard>
                </h:form>
            </div>    
        </section>
    </h:body>
</html>
